<template>
    <div class="container p-5 shadow border border-1">
        <div class="form-group">
          <label for="">品牌</label>
          <input type="text" class="form-control" v-model="carList.cName" name="" id="" aria-describedby="helpId" placeholder="">
        </div>
        <div class="form-group my-3">
          <label for="">价格</label>
          <input type="text" class="form-control" v-model="carList.cPrice" name="" id="" aria-describedby="helpId" placeholder="">
        </div>
        <button type="button" @click="finish" class="btn btn-outline-success col-12 mt-3">完成</button>
    </div>
</template>

<script setup>

import { ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';


const route = useRoute()
const router = useRouter()

const carList = ref({
    cID:route.query.carId,
    cName:route.query.carName,
    cPrice:route.query.carPrice
})
console.log(carList.value.cID);



const finish = e =>{
    router.push({path:'/',query:{
        carid:carList.value.cID,
        carname:carList.value.cName,
        carprice:carList.value.cPrice
    }})
}

console.log(route.query);

</script>

<style lang="scss" scoped>
.container{
    width: 600px;
}
</style>